import React from 'react';
import { SecuritiesCodeC, PrimaryC, codeType, FirstHeaderC, SecondHeaderC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, AutoComplete } from 'antd';
import { connect } from 'dva';
const { Option } = AutoComplete;
// import { Input, Form, Tooltip, Icon, AutoComplete,message } from 'antd';

class SecuritiesCodeDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init: undefined,
      result: [],
      miniUnitId: 'EF0001',
      securityType: '1,2,9',
      tenant: 'WXNSH',
      gzCode: 'BJ0727',
    };

    setTimeout(() => {
      this.setState({
        init: '101-120303',
      });
    }, 3000);
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'securitiesCodeM/getSecuritiesList',
      payload: { codeType: 'stock' },
      callback: (e) => {
        console.log('demo', e && e.length);
        this.setState({
          dsFromParent: e,
        });
      },
    });
  }

  onClick1 = () => {
    this.state.ref1.setSelect('101-120303');
  };
  onClick2 = () => {
    this.state.ref2.setSelect('101-120303');
  };
  onClickProduct = () => {
    this.setState({ gzCode: '555000' });
  };
  handleSearch = (value) => {
    if (value == 1) {
      this.setState({
        result: [
          { key: '11', title: '11' },
          { key: '12', title: '12' },
          { key: '12', title: '12' },
          { key: '12', title: '12' },
        ],
      });
    }
    if (value == 2) {
      this.setState({
        result: [
          { key: '21', title: '21' },
          { key: '22', title: '22' },
          { key: '23', title: '23' },
          { key: '24', title: '24' },
        ],
      });
    }
    if (value == 3) {
      this.setState({
        result: [
          { key: '31', title: '31' },
          { key: '32', title: '32' },
          { key: '33', title: '33' },
          { key: '34', title: '34' },
        ],
      });
    }
  };

  // 更换组合ID
  onClick3 = () => {
    this.setState({
      miniUnitId: 'SCEB',
    });
  };

  onClickSPPI = () => {
    this.setState({ tenant: '014205' });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='基本用法' />
        <Row>
          <Col span={8}>
            <SecondHeaderC title='债券' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code1' codeType={codeType.zq} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='股债基' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code111' codeType={codeType.gzj} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='公募基金' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code2' codeType={codeType.gmjj} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='私募基金' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code21' codeType={codeType.smjj} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='ETF' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code3' codeType={codeType.etf} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='理财直融' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code4' codeType={codeType.lczr} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='非标' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code5' codeType={codeType.fb} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='全部' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code6' codeType={codeType.all} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='获取数据库中有业务类型（股票、债券、基金、ETF、理财直融、非标等）的证券代码' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code7' codeType={codeType.haveBusType} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='获取发行时间区间包含给定时间的发行债券（债券网下申购指令中用到）' />
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code8'
              codeType={codeType.fxBond}
              queryItems={{ time: '2021-07-13' }}
              onChange={(e) => console.log(e)}
              isInitFullData={true}
            />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='根据组合ID，获取该组合下的指定的证券类型（交易分析页面用到）' />
            <div>
              0-债券 1-股票 2-基金 3-银行间融资回购 4-银行间融券回购 5-交易所融资回购 6-交易所融券回购 7-理财直融 8-存款 9-ETF 11-理财 12-非标 13-协议式正回购 14-协议式逆回购
            </div>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code9'
              codeType={codeType.inPortfolio}
              queryItems={{
                miniUnitId: this.state.miniUnitId,
                securityType: this.state.securityType,
                beginDate: '20210601',
                endDate: '20210722',
              }}
              isInitFirstData={true}
              onChange={(e) => console.log(e)}
            />
            <PrimaryC onClick={this.onClick3} title='更换组合ID' />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='场外期权模块' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code11' codeType={codeType.cwqq} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='获取有持仓的标的' />
            <div>
              securityType： 0-债券 1-股票 2-基金 3-银行间融资回购 4-银行间融券回购 5-交易所融资回购 6-交易所融券回购 7-理财直融 8-存款 9-ETF 11-理财 12-非标 13-协议式正回购
              14-协议式逆回购
            </div>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code10'
              codeType={codeType.positioned}
              // queryItems={{securityType:'0'}}
              onChange={(e) => console.log(e)}
            />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='SPPI测试，仅包含债券、非标和理财直融' />
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code11'
              codeType={codeType.sppi}
              queryItems={{ tenant: this.state.tenant }} // 必须填入租户信息
              onChange={(e) => console.log(e)}
            />
            <PrimaryC onClick={this.onClickSPPI} title='点击更改租户' />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='根据产品code，获取该产品下的指定的证券类型（组合股票指令页面用到）' />
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex={'code11'}
              onChange={(e) => console.log(e)}
              codeType={codeType.inProduct}
              queryItems={{ gzCode: this.state.gzCode }}
            />
            <PrimaryC onClick={this.onClickProduct} title='更换产品code' />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='资产管理计划' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code12' codeType={codeType.zgtzptPlan} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='委外投资计划' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code13' codeType={codeType.outsourcing} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='股指期货' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code13' codeType={codeType.stockIndexFutures} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='债券发行信息维护 + 市场已发行债券' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code14' codeType={codeType.allZq} onChange={(e) => console.log(e)} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='资产管理计划 + 委外投资计划' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code15' codeType={codeType.ZCGLJHandWWTZ} onChange={(e) => console.log(e)} />
          </Col>
        </Row>
        <FirstHeaderC title='初始化数据和外部更改' />
        <Row>
          <Col span={8}>
            <SecondHeaderC title='同步初始化' />
            <SecuritiesCodeC
              form={this.props.form}
              codeType={codeType.zq}
              dataIndex='code21'
              onChange={(e) => console.log(e)}
              initialValue={'101-120303'}
              onRef={(ref) => this.setState({ ref1: ref })}
            />
            <PrimaryC onClick={this.onClick1} title='点击赋值' />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='异步初始化' />
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code22'
              codeType={codeType.zq}
              onChange={(e) => console.log(e)}
              initialValue={this.state.init}
              onRef={(ref) => this.setState({ ref2: ref })}
            />
            <PrimaryC onClick={this.onClick2} title='点击赋值' />
          </Col>
        </Row>
        <br />
        <FirstHeaderC title='其他配置' />
        <Row>
          <Col span={8}>
            <SecondHeaderC title='设置校验规则' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code31' onChange={(e) => console.log(e)} rules={[{ required: true, message: '请选择代码!' }]} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='设置帮助信息' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code32' onChange={(e) => console.log(e)} helper='lalal' />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='禁用' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code33' onChange={(e) => console.log(e)} disabled={true} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='附加查询条件' />
            <div>exchangeCode=101:上交所 exchangeCode=105:深交所 exchangeCode=113:银行间债券市场</div>
            <div>clientCode=309904:中债 clientCode=549888:上清</div>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code34'
              onChange={(e) => console.log(e)}
              queryItems={{ exchangeCode: '113', clientCode: '309904' }}
              codeType={codeType.zq}
            />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='无title' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code35' onChange={(e) => console.log(e)} titleDisplay={false} />
          </Col>
          <Col span={8}>
            <SecondHeaderC title='支持将输入框文字作为值传给后台' />
            <SecuritiesCodeC form={this.props.form} dataIndex='code43' codeType={codeType.zq} onChange={(e) => console.log(e)} isInput={true} />
          </Col>
        </Row>
        <Row>
          <FirstHeaderC title='测试AutoComplete，发现当有key值重复，再输入条件查询时，给组件的入参是对的，但是展示的是不对的，此为AutoComplete的bug' />
          <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder='input here'>
            {this.state.result.map((item) => (
              <Option key={item.key} value={item.title}>
                {item.title}
              </Option>
            ))}
          </AutoComplete>
        </Row>
        <FirstHeaderC title='一个页面多次引用证券代码组件，需要禁用组件内部的查询，由外部查询塞给内部，避免多次接口调用' />
        <Row>
          <Col span={8}>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code41'
              codeType={codeType.zq}
              noQueryForInit={true}
              dsFromParent={this.state.dsFromParent}
              onChange={(e) => console.log(e)}
              initialValue={'000001-平安银行-深交所'}
            />
          </Col>
          <Col span={8}>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code42'
              codeType={codeType.zq}
              noQueryForInit={true}
              dsFromParent={this.state.dsFromParent}
              onChange={(e) => console.log(e)}
              // initialValue={this.state.init}
            />
          </Col>
          <Col span={8}>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='code43'
              codeType={codeType.zq}
              noQueryForInit={true}
              dsFromParent={this.state.dsFromParent}
              onChange={(e) => console.log(e)}
              // initialValue={this.state.init}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

// export default Form.create()(SecuritiesCodeDemo);
export default connect(({ securitiesCodeM }) => ({ securitiesCodeM }))(Form.create()(SecuritiesCodeDemo));
